<template>
  <v-container
    class="fill-height"
    fluid
  >
    <v-row
      align="center"
      justify="center"
    >
      <v-col
        cols="12"
        sm="8"
        md="4"
      >
        <v-card class="elevation-12">
          <v-toolbar
            color="primary"
            dark
            flat
          >
            <v-toolbar-title>Login form</v-toolbar-title>
            <v-spacer></v-spacer>
          </v-toolbar>
          <v-card-text>
            <v-form
              ref="loginForm"
              v-model="valid"
              :lazy-validation="false"
            >
              <v-text-field
                label="Username"
                name="username"
                prepend-icon="mdi-account"
                type="text"
                required
                autofocus
                autocomplete="off"
                @keypress.enter.prevent="handleLogin"
                :rules="rules.username"
                v-model="credential.username"
              ></v-text-field>
              <v-text-field
                ref="password"
                id="password"
                label="Password"
                name="password"
                prepend-icon="mdi-lock"
                type="password"
                required
                :rules="rules.password"
                v-model="credential.password"
                @keypress.enter.prevent="handleLogin"
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="primary"
              :disabled="!valid"
              :loading="loading"
              @click="handleLogin"
            >Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
  export default {
    name: 'login',
    data: () => ({
      drawer: null,
      credential: {
        username: null,
        password: null,
      },
      rules: {
        username: [
          v => !!v || 'Username is required'
        ],
        password: [
          v => !!v || 'Password is required'
        ]
      },
      valid: false,
      loading: false,
    }),
    methods: {
      handleLogin() {
        if (!this.credential.password) {
          this.$refs['password'].focus();
          return false;
        }
        this.loading = true;
        this.$store.dispatch('user/login', this.credential).then(user => {
          if (user) {
            this.$toasted.info('Login successfully, current user: ' + user.username);
            this.$router.push('/home')
          }
          else {
            this.$toasted.error('Wrong username or password');
          }
          this.loading = false;
        }).catch(err => {
          this.$toasted.error(err);
          this.loading = false;
        });
      }
    },
    created() {
      if (this.$store.getters.token && this.$store.getters.username) {
        this.$toasted.info('User ' + this.$store.getters.user.username + ' has already logged in');
        this.$router.push('/home')
      }
    }
  }
</script>
